<template>
  <div class="p-6">
    <div class="text-center mb-6">
      <h2 class="text-xl font-bold text-gray-900 mb-2">语音历史</h2>
      <p class="text-gray-600">查看您的语音识别记录</p>
    </div>

    <div v-if="loading" class="text-center py-8">
      <div class="text-gray-500">加载中...</div>
    </div>

    <div v-else-if="records.length === 0" class="text-center py-8">
      <div class="text-gray-500">暂无语音记录</div>
    </div>

    <div v-else class="space-y-4">
      <div
        v-for="record in records"
        :key="record.id"
        class="bg-white p-4 rounded-lg shadow-sm border"
      >
        <div class="flex justify-between items-start mb-2">
          <div class="text-sm text-gray-500">
            {{ new Date(record.createdAt).toLocaleString() }}
          </div>
          <div class="text-xs text-gray-400">
            置信度: {{ (record.confidence * 100).toFixed(1) }}%
          </div>
        </div>
        <div class="text-gray-900">{{ record.text }}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useAppStore } from '@/store';
import { voiceAPI } from '@/services/api';
import type { VoiceRecord } from '@/types';

const store = useAppStore();
const records = ref<VoiceRecord[]>([]);
const loading = ref(false);

onMounted(async () => {
  if (!store.user) return;
  
  loading.value = true;
  try {
    records.value = await voiceAPI.getHistory(store.user.id);
  } catch (error) {
    console.error('加载语音历史失败:', error);
  } finally {
    loading.value = false;
  }
});
</script> 